<template>
  <view class="container">

    <!-- 按钮部分 -->
    <view class="button-group">
      <button class="primary-btn" type="primary" @click="gotoPage('/pages/consult/reserve/reserve')">去预约挂号页面</button>
      <button class="secondary-btn" type="default" @click="gotoPage('/pages/consult/myreservations/myreservations')">我的预约</button>
      <button class="secondary-btn" type="default" @click="gotoPage('/pages/consult/appointments/appointments')">我的就诊</button>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from "vue";

const gotoPage = (url) => {
  uni.navigateTo({
    url: url
  });
};
</script>

<style scoped>
/* 容器的基本布局 */
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center; /* 居中内容 */
}

/* 按钮组的布局 */
.button-group {
  width: 80%; /* 让按钮组宽度占据80%屏幕 */
  display: flex;
  flex-direction: column; /* 垂直排列按钮 */
  align-items: center; /* 按钮水平居中 */
  gap: 20rpx; /* 按钮之间的间距 */
  margin-top: 50rpx;
}

/* 主按钮样式 */
.primary-btn {
  background-color: #007bff;
  color: white;
  width: 100%; /* 按钮宽度占据父容器100% */
  padding: 20rpx;
  border-radius: 10rpx;
  font-size: 32rpx;
  text-align: center; /* 文字居中 */
}

/* 次要按钮样式 */
.secondary-btn {
  background-color: #f8f9fa;
  color: #007bff;
  width: 100%; /* 按钮宽度占据父容器100% */
  padding: 20rpx;
  border-radius: 10rpx;
  font-size: 32rpx;
  border: 1rpx solid #007bff;
  text-align: center;
}

/* 确保所有按钮在小屏幕和大屏幕上都显示良好 */
button {
  max-width: 600rpx; /* 设置最大宽度，避免按钮过大 */
}
</style>

